<template>
  <div>
    <ElMenu class="el-menu-demo my-menu" mode="horizontal" :ellipsis="false" default-active="1">
      <ElMenuItem index="1">首页</ElMenuItem>
      <ElMenuItem index="2">成长档案袋</ElMenuItem>
      <ElMenuItem index="3">功能菜单</ElMenuItem>
      <ElMenuItem index="4">功能菜单</ElMenuItem>
      <ElMenuItem index="5">功能菜单</ElMenuItem>
    </ElMenu>
  </div>
</template>

<script>
// import { ElMenu, ElMenuItem } from 'element-plus'

export default {
  name: 'MyMenu'
}
</script>

<style scoped>
.my-menu .is-active {
  color: #5dbe69 !important;
  border-bottom: 0px solid #fff !important;
  background-size: auto 100%;
}

.is-active::after {
  position: absolute;
  top: 40px;
  left: 20px;
  width: calc(75% - 20px);
  height: 7px;
  background-image: linear-gradient(to right, #97d891, #4cad6e);
  border-radius: 15px;
  content: '';
}
.el-menu-item :hover {
  border: #5dbe69 !important;
}
</style>
